<template>
    <div class="whyexchange">
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">为什么要更换刷头？</span>
        <span slot="more"></span>
        </LoginHeader>
        <div>
            <img src="@/assets/njrpic/firstpic/whyexchangepic1.png" alt="">
        </div>
        <el-card class="box-card">
            <p>它是一支"发型"很帅的牙刷刷头</p>
            <img src="@/assets/njrpic/firstpic/whyexchangepic2.png" alt="">
            <p>每天它勤勤恳恳地帮牙齿刷走几万个牙菌和不少食物残渣</p>
            <div class="exchange">
                <span>最高37200次/分钟</span>
                <span>多种按摩模式</span>
                <span>牙刷姿势识别</span>
            </div>
            <img src="@/assets/njrpic/firstpic/whyexchangepic3.png" alt="">
            <br>
            <span>而牙齿却给它做了不少“炫酷造型”</span>
            <div class="exchange">
                <span>刷毛损坏，清洁力度下降</span>
            </div>
            <img src="@/assets/njrpic/firstpic/whyexchangepic5.png" alt="">
            <p>这“造型”有害！</p>
            <div class="exchange">
            <span>一般在使用三个月左右，刷毛会出现磨损变形。
                <br>
刷毛磨损的刷头易伤害牙龈，也易滋生大量细菌
<br>
因此牙科医生建议刷头需三个月更换一次
            </span>
            </div>
            <br>
            <img src="@/assets/njrpic/firstpic/whyexchangepic4.png" alt="">
            <p>欢迎收看《牙与细菌》自然探索节目
                <br>
                见证口腔和亿万细菌共存的精彩瞬间
            </p>
            <img src="@/assets/njrpic/firstpic/whyexchangepic6.png" alt="">
        </el-card>
        <br>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{

        }
    },
     components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="less" scoped>
.whyexchange{
    text-align: center;
    background-image: linear-gradient(#37c6ce, #6bddbb);
    .el-card{
        margin-top: -7px;
        p{
            margin: 100px 0;
        }
        .exchange{
            display: flex;
    justify-content: space-evenly;
    color: #868686;
    margin-bottom: 70px;
        }
        br+span{
            display: inline-block;
            margin-top: 50px;
        }
        .exchange+img+p{
            margin-bottom: 0;
        }
    }
}
</style>